<p-accordion [multiple]="true">
                <p-accordionTab header="{{'data_communication' | translate}}" [selected]="true">
                    <div>
                        <div class="p-grid">
                            <div class="p-col-6 local-accordion-text-key">
                                {{'mode' | translate}}:
                            </div>
                            <div class="p-col-6 local-accordion-text-value">
                                <p-dropdown [style]="{'width':'200px'}" [options]="communicationMode"
                                            [(ngModel)]="selectedCommunicationMode" optionLabel="mode"></p-dropdown>
                            </div>
                        </div>
                        <div class="p-grid">
                            <div class="p-col-6 local-accordion-text-key">
                                {{'url' | translate}}:
                            </div>
                            <div class="p-col-6 local-accordion-text-value">
                                <input class="input-style" placeholder="Cloud URL" pInputText maxlength="24"
                                       [(ngModel)]="this.dataCommunicationInformation.url">
                            </div>
                        </div>
                        <div style="pointer-events: none">
                            <div class="p-grid">
                                <div class="p-col-6 local-accordion-text-key">
                                    {{'user_name' | translate}}:
                                </div>
                                <div class="p-col-6 local-accordion-text-value">
                                    <input class="input-style" placeholder="********" pInputText maxlength="24"
                                           [(ngModel)]="this.dataCommunicationInformation.userName">
                                </div>
                            </div>
                            <div class="p-grid">
                                <div class="p-col-6 local-accordion-text-key">
                                    {{'password' | translate}}:
                                </div>
                                <div class="p-col-6 local-accordion-text-value">
                                    <input class="input-style" placeholder="********" pInputText maxlength="24"
                                           [(ngModel)]="this.dataCommunicationInformation.passWord">
                                </div>
                            </div>
                            <div class="p-grid">
                                <div class="p-col-6 local-accordion-text-key">
                                    {{'network_ID' | translate}}:
                                </div>
                                <div class="p-col-6 local-accordion-text-value">
                                    <input class="input-style" placeholder="Cloud Network ID" pInputText maxlength="24"
                                           [(ngModel)]="this.dataCommunicationInformation.networkId">
                                </div>
                            </div>
                            <div class="p-grid">
                                <div class="p-col-6 local-accordion-text-key">
                                    {{'node_id' | translate}}:
                                </div>
                                <div class="p-col-6 local-accordion-text-value">
                                    <input class="input-style" placeholder="Cloud Node ID" pInputText maxlength="24"
                                           [(ngModel)]="this.dataCommunicationInformation.nodeId">
                                </div>
                            </div>
                            <div class="p-grid">
                                <div class="p-col-6 local-accordion-text-key">
                                    {{'report_interval' | translate}}:
                                </div>
                                <div class="p-col-6 local-accordion-text-value">
                                    <input class="input-style" placeholder="Cloud Report Interval" pInputText maxlength="24"
                                           [(ngModel)]="this.dataCommunicationInformation.reportInterval">&nbsp;
                                    <p-dropdown [style]="{'width':'100px'}" [options]="intervalUnit"
                                                [(ngModel)]="selectIntervalUnit" optionLabel="unit"></p-dropdown>
                                </div>
                            </div>
                            <div class="p-grid">
                                <div class="p-col-6 local-accordion-text-key">
                                    {{'reset_multiplier' | translate}}:
                                </div>
                                <div class="p-col-6 local-accordion-text-value">
                                    <input class="input-style" placeholder="Cloud Timestamp Reset Multiplier" pInputText maxlength="24"
                                           [(ngModel)]="this.dataCommunicationInformation.resetMultiplier">
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="p-grid local-accordion-body">
                        <div class="p-col-9">
                        </div>
                        <div class="p-col-3 p-grid">
                            <div class="p-col-6 header-button-local">
                                <div>
                                    <button class="button-type header-button-right" (click)="setUdp()" pButton label="{{'apply_change' | translate}}"></button>
                                </div>
                            </div>
                            <div class="p-col-6 header-button-local">
                                <div>
                                    <button class="button-type header-button-right" disabled pButton
                                            label="{{'restore_default' | translate}}"></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </p-accordionTab>
</p-accordion>
<p-toast position="top-right"></p-toast>
